<template>
  <div class="time-time">
    <div class="main-bg" :style="sceneid==='sstbg'?'height:640px;':''"></div>
    <el-row class="row-top">
      <el-col :span="24">
        <el-main style="padding:10px 0">
          <el-avatar width="100%" :size="50" :src="this.$store.state.appointment.doctor.imgBase">医生照片</el-avatar>
          <h1 class="doctor-name">{{ this.$store.state.appointment.doctor.doctorName }}</h1>
          <h1 class="doctor-name"><b>{{this.$store.state.appointment.doctor.title}}</b></h1>
          <p>{{ this.$store.state.appointment.doctor.description }}</p>
        </el-main>
      </el-col>
    </el-row>
    <el-row class="row-bottom">
      <el-col :span="24">
        <div v-if="showUpArrow" class="slide-arrow slide-up"><i @click="pageTurning('up')" class="el-icon-arrow-up"></i></div>
          <el-row :gutter="20">
            <el-col style="margin-bottom:20px" v-for="( child, index ) in pageList" :key="index" :span="6">
              <el-button @click="selectTime(child)" style="width: 100%">{{ child }}</el-button>
            </el-col>
          </el-row>
        <!-- <el-table
        :data = "pageList"
        @row-click="selectTime"
        :show-header = false
        style="width: 100%">
          <el-table-column
            prop="BeginTime"
            label="时间段">
            <template slot-scope="scope">
              <div><span style="color:green;font-weight:bold;font-size:35px">{{scope.row}}</span></div>
            </template>
          </el-table-column>
        </el-table> -->


        
        <!-- <div class="slide-arrow slide-down"><i @click="pageTurning('down')" class="el-icon-arrow-down"></i></div> -->
        <!-- <div v-if="showDownArrow" class="slide-arrow slide-down"><i @click="pageTurning('down')" class="el-icon-arrow-down"></i></div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryTime } from '@api/data'
import moment from 'moment'
export default {
  name: "Mzsj",
  components:{
  },
  data() {
    return {
      sceneid:this.$store.state.terminfo.seceninfo.sceneid,
      sjinfos: [], // 页面初始化请求回来所有的数据
      showDay: "", // 展示在时间段列表上方的日期和星期
      dayRange: [], // 可选日期段
      timeRanges: [], // 选择日期后当天的时间段
      currentPage: 0,
      pageSize: 5,
      showUpArrow: false,
      showDownArrow: false,
      pageList: []  // 显示在分页中的内容
    };
  },
  // props: {
  //   selectedDoc: Object
  // },
  mounted() {
    this.query();
  },
  computed: {
  },
  methods: {
    isAvailable: function(day) {
      const availableDays = this.sjinfos.map(item=>{
        return item.VisitDate
      })
      return availableDays.includes(day)
    },
    selectTime(currentRow) {

      this.$store.dispatch('appointment/updateTime', currentRow)
      this.$emit('selectTime', currentRow)
    },
    query() {
      let data = {}
      data.url = "/api/GetReservationList"
      data.payload = {
        "regDate": this.$store.state.appointment.date.day,//上一步的选择日期
        "type": this.$store.state.appointment.date.type,//选择日期为当天传1、挂号 ，其余日期传2、预约挂号
        "deptId": this.$store.state.appointment.department.value,
        "scheduleId":this.$store.state.appointment.doctor.scheduleId,
        "doctorId":this.$store.state.appointment.doctor.doctorId,
          "termId": this.$store.state.terminfo.terminfo.termId,
        "hisOperNo": this.$store.state.terminfo.terminfo.hisOperNo,
      }
      queryTime(data).then(res => {
        if(res.data.length<1){
          this.$alert("当前医生无排班时间,请重新选择医生", "提示：", {
              confirmButtonText: "确定",
              callback: action => {
              }
            });
            return;
        }
        this.sjinfos = res.data
        this.timeRanges =this.sjinfos[0].timeValue;
        this.pageList = this.timeRanges 
        // this.setPagination();
      })
     
    },
        // 加载页面信息及设置箭头
    setPagination(){
      if (this.timeRanges.length > (this.currentPage+1)*this.pageSize){
        this.showDownArrow = true
      }else{
        this.showDownArrow = false
      }
      if (this.currentPage>0){
        this.showUpArrow = true
      }else{
        this.showUpArrow = false
      }
      this.pageList = this.timeRanges.slice(this.currentPage*this.pageSize, (this.currentPage+1)*this.pageSize)
    },
    // 翻页
    pageTurning(dir) {
      let total = this.timeRanges.length
      if(dir==="down"){
        if(total> this.pageSize){
          this.currentPage++
        }
      }else if(dir==="up"){
          if(this.currentPage>=1){
            this.currentPage--
          }   
      }
      this.setPagination()
    }
  }
};
</script>
<style scoped>
  .main-bg{
    position: absolute;
    width: 100%;
    left: 10px;
    top: 46px;
    bottom: 0;
    background: #aaa;
  }
  .el-row{
    position: absolute;
    left: 0;
    width: 100%;
    /* display: flex; */
    padding-top: 4px;
    box-sizing: border-box;
    justify-content: center;
  }
  .el-row.row-top{
    top: 46px;
    bottom: 200px;
  }
  .el-row.row-bottom{
    top: 200px;
    bottom: 0;
  }
  .el-main{
    border-radius: 12px;
    background: #fff;
    margin: 10px;
    padding: 0;
    text-align: center;
  }
  .doctor-name{
    color: #333;
    font-size: 16px;
    margin: 4px 0 6px 0;
  }
  .doctor-name b{
    color: #999;
  }
  .seleced-show-day{
    width: 100%;
    height: 72px;
    line-height: 72px;
    font-size: 24px;
    font-weight: bold;
    color: #2888ef;
    text-align: center;
  }
  .amount-number{
    text-align: center;
    height: 48px;
    width: 48px;
    border-radius: 30px;
    background: #2888ef;
    color: #fff;
    font-weight: bold;
    padding-top: 8px;
  }
  .amount-number p{
    line-height: 18px;
  }
  .amount-number.over{
    background: #999;
    padding-top: 14px;
  }
  .slide-arrow{
    position: fixed;
    right: 60px;
    font-size: 32px;
    font-weight: bold;
    color: #2888ef;
  }
  .slide-up{
    top: 160px;
  }
  .slide-down{
    bottom: 120px;
  }
  /* 覆盖原有element-ui日历样式 */
  .el-calendar-table .el-calendar-day{
    position: relative;
    height: 60px;
  }
  .el-calendar-table .el-calendar-day .available::before{
    content:"有号";
    position: absolute;
    z-index: 0;
    top: 26px;
    left: 12px;
    color:turquoise;
    font-weight: bold;
  }
  .el-calendar-table .el-calendar-day .selected{
    z-index: 1;
  }
</style>
<style>

</style>